<template>
  <div class="renting">
    <header>
      <span class="iconfont icon-fanhui" @click="goback"></span>
      <span>房屋求租</span>
    </header>
    <main>
      <div class="select">
        <van-dropdown-menu>
          <van-dropdown-item :value="value1" :options="option1" />
          <van-dropdown-item :value="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
      <div class="houseList">
        <div class="houseItem" v-for="item in houseList" :key="item.houseCode">
          <div class="userName"><span class="iconfont icon-touxiang"></span><span>用户名称</span></div>
          <p>{{item.desc}}</p>
          <div class="contact">
            <div>
              <span>意向区域：昌平区</span>
              <span>意向价格：<span>{{item.price}}.00/月</span></span>
            </div>
            <div>
              <button open-type="contact" bindcontact="handleContact" class="chat"><span class="iconfont icon-xiaoxi"></span></button>
              <button class="tel" @click="Tel"><span class="iconfont icon-dianhua"></span></button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- <button open-type="contact" bindcontact="handleContact">消息</button> -->
  </div>
</template>

<script>
import "../../static/iconfont/font_g5b9ldx0nvj/iconfont.css";
import {getHouseType,getCityList,getHouseList,getUserList} from '../../service/index'
export default {
  data() {
    return {
      option1: [{ text: "房产类型", value: 0 },],
      option2: [{ text: "区域选择", value: "a" }],
      value1: 0,
      value2: "a",
      houseList: [],
      userList:[]
    };
  },
  async onShow() {
    let result = await getHouseType()
    // console.log(result);
    if(result.status === 200){
      const json = JSON.parse(JSON.stringify(result.body).replace(/label/g,"text"));
      this.option1 = [...this.option1,...json.floor,...json.oriented,...json.roomType,...json.supporting]
    }
    let res = await getCityList()
    // console.log(res)
    if(res.status === 200){
      const data = JSON.parse(JSON.stringify(res.body).replace(/label/g,"text"));
      this.option2 = [...this.option2,...data]
    }
    let res1 = await getHouseList()
    console.log(res1)
    if(res1.status === 200){
      this.houseList = res1.body.list
      console.log(this.houseList)
    }
    // let res2 = await getUserList()
    // console.log(res2)
    // if(res2.status === 200){
    //   this.userList = res2.body
    // }
  },
  methods:{
    Tel() {
      wx.makePhoneCall({
        phoneNumber: '13661725473', //这个是我的手机号，模拟测试
        success: function () {
          console.log("拨打电话成功！")
        },
        fail: function () {
          console.log("拨打电话失败！")
        }
      })
    },
    goback(){
      uni.navigateBack()
    }
  }
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
  .renting {
  width: 100%;
  height: 100%;
  }
  header {
    height: 130rpx;
    background: linear-gradient(90deg, rgb(100, 100, 255), rgb(123, 123, 248));
  }

  header > span {
    display: inline-block;
    margin-top: 60rpx;
    color: #fff;
  }
  header > span:nth-child(2) {
    margin-left: 35%;
  }
  .houseList{
    background-color: #f1f1f1;
    >.houseItem{
      height: 260rpx;
      background-color: #fff;
      margin-top: 48rpx;
      .userName{
        padding-top: 30rpx;
        padding-left: 40rpx;
        &>span:nth-child(2){
          margin-left: 20rpx;
        }
        .icon-touxiang{
          font-size: 60rpx;
        }
      }
      >p{
        height: 80rpx;
        line-height: 80rpx;
        margin:0 40rpx;
        border-bottom: 1px solid #ebeaea;
      }
      .contact{
        line-height: 54rpx;
        margin:0 40rpx;
        display: flex;
        justify-content: space-between;
        &>div:nth-child(1){
          margin-top: 18rpx;
          &>span:nth-child(1){
            color: rgb(116, 114, 114);
            font-size: 24rpx;
          }
          &>span:nth-child(2){
            color: rgb(116, 114, 114);
            font-size: 24rpx;
            margin-left: 20rpx;
            >span{
              color: rgb(236, 61, 61);
            }
          }
        }
        &>div:nth-child(2){
          display: flex;
          align-items: center;
          .chat{
            border: none;
            outline: none;
            width: 50rpx;
            height: 50rpx;
            background-color: rgb(251, 217, 217);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24rpx;
            .icon-xiaoxi{
               color: rgb(199, 19, 19);
             }
          }
          .tel{
            border: none;
            outline: none;
            width: 50rpx;
            height: 50rpx;
            background-color: rgb(251, 217, 217);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-dianhua{
               color: rgb(199, 19, 19);
             }
          }
        }
      }
    }
    &>div:nth-child(1){
      border-top: 1px solid #000;
      margin-top: 0;
    }
  }
</style>